<template>
    <div class="train">
        <!-- search -->
        <div class="search">
            <input class="searchInput" @focus="inputFocus" @blur="inputBlur" v-model="searchInput">
            <i class="search-icon" v-show="searchShow"></i>
            <span class="searchPlaceHolder" v-show="searchShow">搜索</span>
        </div>
        <mTitle :title="title"></mTitle>
        <scroll class="train-container" :data="trainList" v-show="!searchInput">
            <div>
                <ul class="train-item">
                    <router-link :to="'trainText/'+item.id" tag="li" class="train-list" v-for="(item, index) in trainList" :key="index">
                        <div class="left">
                            <img class="img" v-lazy="item.coverimg" alt="" />
                        </div>
                        <div class="middle">
                            <div class="train-list-title">{{item.trainname}}</div>
                            <div class="start-wrapper">
                                <div class="start-time">
                                    <span class="start-date">{{item.startdate}}</span>
                                    <span class="start-hour">{{item.starttime}}</span>
                                </div>
                                <div class="train-people">
                                    <span class="name">辅导老师：</span>
                                    <span class="text">{{item.teacher}}</span>
                                </div>
                                <div class="train-number">
                                    <span class="text">预约人数：</span>
                                    <span class="end-hour">
                                        <b class="num">{{item.signnum}}</b> /
                                        {{item.totalnum}}人
                                    </span>
                                </div>
                            </div>
                        </div>
                        <div class="right">
                            <span tag="span" class="train-order" v-if="item.hascanyu==='-1'">审核中</span>
                            <span tag="span" class="train-order" v-if="item.hascanyu===0" @click.stop="trainDetailShow(item.id)">预约</span>
                            <span tag="span" class="train-order" v-if="item.hascanyu==='1'" @click.stop="cancelOrder(item.id)">{{cancelOrderVal}}</span>
                            <span tag="span" class="train-order" v-if="item.hascanyu==='2'">已拒绝</span>
                        </div>
                    </router-link>
                </ul>
            </div>
            <!-- 请求数据loading -->
            <div class="loading-wrapper" v-show="!trainList.length">
                <loading></loading>
            </div>
        </scroll>
        <!-- 匹配搜索结果 -->
        <scroll class="train-container" :data="list" v-show="list.length">
            <div>
                <ul class="train-item">
                    <router-link :to="'trainText/'+item.id" tag="li" class="train-list" v-for="(item, index) in list" :key="index">
                        <div class="left">
                            <img class="img" :src="item.coverimg" alt="" />
                        </div>
                        <div class="middle">
                            <div class="train-list-title">{{item.trainname}}</div>
                            <div class="start-wrapper">
                                <div class="start-time">
                                    <span class="start-date">{{item.startdate}}</span>
                                    <span class="start-hour">{{item.starttime}}</span>
                                </div>
                                <div class="train-people">
                                    <span class="name">辅导老师：</span>
                                    <span class="text">{{item.teacher}}</span>
                                </div>
                                <div class="train-number">
                                    <span class="text">预约人数：</span>
                                    <span class="end-hour">
                                        <b class="num">{{item.signnum}}</b> /
                                        {{item.totalnum}}人
                                    </span>
                                </div>
                            </div>
                        </div>
                        <div class="right" v-show="item.cansub === 1">
                            <span tag="span" class="train-order" v-if="item.hascanyu==='-1'">审核中</span>
                            <span tag="span" class="train-order" v-if="item.hascanyu===0" @click.stop="trainDetailShow(item.id)">预约</span>
                            <span tag="span" class="train-order" v-if="item.hascanyu==='1'" @click.stop="cancelOrder(item.id)">{{cancelOrderVal}}</span>
                            <span tag="span" class="train-order" v-if="item.hascanyu==='2'">已拒绝</span>
                        </div>
                    </router-link>
                </ul>
            </div>
        </scroll>
        <div class="no-result" v-show="!list.length && searchInput">暂无搜索结果</div>
        <train-detail ref="trainDetailFlag" :DetailList="DetailList" @changeSuccess="changeSuccess" @changeAudit="changeAudit"></train-detail>
    </div>
</template>

<script>
    import axios from 'axios'
    import mTitle from 'base/title/title'
    import Scroll from 'base/scroll/scroll'
    import Loading from 'base/loading/loading'
    import {Dialog} from 'vant'
    import {Toast} from 'vant'
    import TrainDetail from 'pages/train/components/train-detail/trainDetail'
    export default {
        data () {
            return {
                searchInput: "",
                searchShow: true,
                title: "预约培训",
                cancelOrderVal: "取消预约",
                trainList: [],
                list: [],
                DetailList: {}
            }
        },
        methods: {
            inputFocus () {
                this.searchShow = false
            },
            inputBlur () {
                if (this.searchInput === "") {
                    this.searchShow = true
                }
            },
            // 预约成功
            changeSuccess (id) {
                for (var i=0;i<this.trainList.length;i++) {
                    if (Number(id) === Number(this.trainList[i].id)) {
                        this.trainList[i].hascanyu = "1"
                        this.trainList[i].signnum = Number(this.trainList[i].signnum) + 1
                    }
                }
            },
            // 预约审核
            changeAudit (id) {
                for (var i=0;i<this.trainList.length;i++) {
                    if (Number(id) === Number(this.trainList[i].id)) {
                        this.trainList[i].hascanyu = "-1"
                    }
                }
            },
            // 取消预约请求
            cancelOrder (id) {
                Dialog.confirm({
                    message: "是否取消预约"
                }).then(() => {
                    axios.post('/api/index.php?g=Api&m=Ucenter&a=canceltrain', {
                        openid: localStorage.getItem("openid"),
                        mid: localStorage.getItem("memberid"),
                        trainid: id
                    }).then((res) => {
                        // 取消成功
                        if (res.data.rescode === "0000") {
                            Toast.success('取消成功')
                            for (var i=0;i<this.trainList.length;i++) {
                                if (Number(id) === Number(this.trainList[i].id)) {
                                    this.trainList[i].hascanyu = 0
                                    this.trainList[i].signnum = Number(this.trainList[i].signnum) - 1
                                }
                            }
                        }
                    }).catch(function (error) {
                        
                    })
                }).catch(() => {
                    Dialog.close()
                })
            },
            // 根据点击的id进行数据请求
            trainDetailShow (id) {
                this.$refs.trainDetailFlag.show()
                for(var i=0;i<this.trainList.length;i++) {
                    if (this.trainList[i].id === id) {
                        this.DetailList = this.trainList[i]
                    }
                }
            },
            // 页面信息请求
            getTrainInfo () {
                axios.post('/api/index.php?g=Api&m=Ucenter&a=trainlist', {
                    openid: localStorage.getItem("openid"),
                    mid: localStorage.getItem("memberid")
                }).then((res) => {
                    // 请求成功
                    if (res.data.rescode === "0000") {
                        this.trainList = res.data.data
                        console.log(typeof this.trainList[0].cansub)
                    }
                }).catch(function (error) {
                    // 请求失败
                })
            }
        },
        watch: {
            // 监听input变化进行搜索判断
            searchInput () {
                this.list = []
                let result = []
                if(this.searchInput === "") {
                    result = []
                    this.list = []
                    return
                }
                for (let i in this.trainList) {
                    let value = this.trainList[i].trainname
                    let teacher = this.trainList[i].teacher
                    if(value.indexOf(this.searchInput) > -1 || teacher.indexOf(this.searchInput) > -1) {
                        result.push(i)
                    }
                }
                for(let k in result) {
                    this.list = this.list.concat(this.trainList[result[k]])
                }
            }
        },
        components: {mTitle,Scroll,Loading,TrainDetail},
        created() {
            this.getTrainInfo()
        }
    }
</script>

<style lang="stylus" scoped>
    .train
        width: 100%
        height: 100%
        position: relative
        overflow: hidden
        .search
            width: 100%
            height: 44px
            background: #efeff4
            padding: 0 15px
            box-sizing: border-box
            -webkit-box-sizing: border-box
            position: relative
            overflow: hidden
            .searchInput
                width: 100%
                height: 32px
                background: #fff
                margin-top: 6px
                border: none
                border-radius: 0
                padding: 0 10px
                box-sizing: border-box
                -webkit-box-sizing: border-box
            .search-icon
                position: absolute
                background: url('./search-icon.png') no-repeat
                width: 13px
                height: 13px
                background-size: 100% 100%
                top: 16px
                left: 50%
                margin-left: -15px
            .searchPlaceHolder
                font-size: 14px
                color: #979797
                position: absolute
                top: 17px
                left: 51%
        .no-result
            padding: 0 15px
            line-height: 30px
            font-size: 16px
            color: #888
        .train-container
            position: absolute
            top: 86px
            width: 100%
            padding: 0 15px
            box-sizing: border-box
            bottom: 0
            overflow: hidden
            .loading-wrapper
                position: absolute
                width: 100%
                top: 50%
                -webkit-transform: translateY(-50%)
                transform: translateY(-50%)
                z-index: 9
            .train-item
                width: 100%
                .train-list
                    width: 100%
                    height: 100px
                    border-bottom: 1px solid #eee
                    box-sizing: border-box
                    display: flex
                    align-items: center
                    overflow: hidden
                    position: relative
                    .left
                        flex: 0 0 100px
                        width: 100px
                        margin-right: 10px
                        .img
                            width: 100px
                    .middle
                        flex: 1
                        ellipsis()
                        .train-list-title
                            width: 100%
                            font-size: 14px
                            ellipsis()
                        .start-wrapper
                            margin-top: 6px
                            .start-time,.train-people
                                font-size: 0
                                margin-top: 4px
                                .start-date,.name
                                    font-size: 14px
                                    color: #888
                                .start-hour,.text
                                    font-size: 14px
                                    color: #888
                                    margin-left: 10px
                            .train-people
                                .text
                                    margin-left: 0px
                            .train-number
                                margin-top: 4px
                                .text
                                    font-size: 14px
                                    color: #888
                                .end-hour
                                    font-size: 14px
                                    color: #888
                                    .num
                                        color: #d40000
                    .right
                        position: absolute
                        right: 0
                        top: 38px
                        .train-order
                            width: 66px
                            height: 24px
                            background: #0094d4
                            border-radius: 20px
                            color: #fff
                            display: block
                            text-align: center
                            line-height: 24px
                            font-size: 14px
</style>